import React, { Component } from 'react';
import { View, Image, Text, StyleSheet, ImageBackground, TouchableWithoutFeedback, ScrollView, FlatList, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux'
import { Colors, AppStyles } from '../../style';
import Images from '../../images';
import LookMore from '../../common/components/LookMore';
import ClassItem from '../../common/components/ClassItem';
import ShopItem from '../../common/components/ShopItem';
import { Button } from 'antd-mobile-rn';
import { NavigationActions } from '../../common/utils';

var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;
const imageHeight = screenWidth * 6 / 16;

leftColor = Colors.green;//剩余数量
buttonColor = Colors.green;//订阅颜色
/**
 * 教练详情
 */
@connect()
export default class ClassDetail extends Component {
    static navigationOptions = {
        title: '课程详情'
    }
    render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <ImageBackground style={styles.Image}>
                        <View style={{
                            position: 'absolute',
                            width: 70, height: 25,
                            borderRadius: 15,
                            backgroundColor: 'rgba(255,255,255,0.5)',
                            justifyContent: 'center',
                            alignItems: 'center',
                            bottom: 5, right: 5,
                            flexDirection: 'row'
                        }}>
                            <Image source={Images.image}
                                style={{ width: 20, height: 20, marginRight: 5 }} />
                            <Text style={AppStyles.smallTextStyle}>55</Text>
                        </View>
                    </ImageBackground>
                    <View style={styles.black} />
                    <View style={styles.item}>
                        <View style={{ margin: 10 }}>
                            <Text style={AppStyles.bigTextStyle}>课程名称</Text>
                        </View>
                    </View>
                    <View style={styles.black} />
                    <View style={{ flexDirection: 'row', height: 40, marginLeft: 10, width: screenWidth - 10, alignItems: 'center' }}>
                        <Image source={Images.money} style={{ width: 25, height: 25 }} />
                        <Text style={[AppStyles.mediumTextStyle, { color: Colors.green }]}>课程价格</Text>
                        <View style={{ position: 'absolute', top: 5, right: 10 }}>
                            <TouchableWithoutFeedback >
                                <View style={{ backgroundColor: buttonColor, height: 30, width: 70, borderRadius: 5.0, justifyContent: 'center', alignItems: 'center' }}>
                                    <Text style={[AppStyles.mediumTextStyle, { color: Colors.white }]}>购买</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        </View>
                    </View>
                    <View style={styles.black} />
                    <Text style={[AppStyles.mediumTextStyle, { marginLeft: 10 }]}>课程详情</Text>
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={[AppStyles.smallTextStyle, { marginLeft: 20 }]}>课程剩余数量：</Text>
                        <Text style={[AppStyles.smallTextStyle, { color: leftColor }]}>1</Text>
                        <Text style={[AppStyles.smallTextStyle, { marginLeft: 10 }]}>课程限制人数：</Text>
                        <Text style={[AppStyles.smallTextStyle, { color: Colors.orange }]}>10</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={[AppStyles.smallTextStyle, { marginLeft: 20 }]}>单次课程价格： </Text>
                        <Text style={[AppStyles.smallTextStyle, { color: Colors.orange }]}>10/每次</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={[AppStyles.smallTextStyle, { marginLeft: 20 }]}>课程周期： </Text>
                        <Text style={[AppStyles.smallTextStyle, { color: Colors.orange }]}>2018年7月-2019年8月</Text>
                    </View>
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={[AppStyles.smallTextStyle, { marginLeft: 20 }]}>课程时间： </Text>
                        <Text style={[AppStyles.smallTextStyle, { color: Colors.orange }]}>18:00-21:00</Text>
                    </View>
                    <Text style={[AppStyles.smallTextStyle, { marginLeft: 10 }]}>课程描述</Text>
                    <View style={[styles.smallBlack, { marginLeft: 20 }]}></View>
                    <View style={{ width: screenWidth - 40, marginLeft: 20 }}>
                        <Text style={[AppStyles.smallTextStyle, { color: Colors.orange }]}>{'暂无简介'}</Text>
                    </View>
                    <Text style={[AppStyles.smallTextStyle, { marginLeft: 10 }]}>授课门店</Text>
                    <View style={styles.smallBlack}></View>
                    <ShopItem />
                    <Text style={[AppStyles.smallTextStyle, { marginLeft: 10 }]}>授课教练</Text>
                    <View style={styles.smallBlack}></View>
                    <TouchableOpacity onPress={() => {
                        this.props.dispatch(NavigationActions.navigate({routeName:'CoachDetail'}))
                    }}>
                        <View style={{ flexDirection: 'row', width: screenWidth - 10, height: 60, margin: 10 }}>
                            <Image source={Images.image1} style={{ width: 60, height: 60 }} />
                            <View style={{ flex: 1, justifyContent: 'center', marginLeft: 10 }}>
                                <Text style={AppStyles.mediumTextStyle}>教练名</Text>
                                <Image source={Images.star5} style={{ height: 10, width: 60 }} />
                            </View>
                        </View>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    titleBar: {
        width: screenWidth,
        height: 60,
        backgroundColor: Colors.black,
        position: 'absolute',
        zIndex: 2,
        opacity: 0.0
    },
    Image: {
        width: screenWidth,
        height: imageHeight,
        backgroundColor: Colors.orange
    },
    item: {
        width: screenWidth,
        marginTop: 5,
        justifyContent: 'center'
    },
    title: {
        width: screenWidth,
        height: 35,
        justifyContent: 'center'
    },
    black: {
        width: screenWidth,
        height: 5,
        backgroundColor: Colors.grey
    },
    smallBlack: {
        height: 1,
        width: screenWidth - 10,
        marginLeft: 10,
        backgroundColor: Colors.grey,
        marginTop: 5
    }
})